<template>
    <div>
        <a-modal v-model="show" :title="form.id?'编辑':'新增'" @ok="handleOk" @cancel="show = false">
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                <a-form-item label="答案类型">
                    <a-select v-model="form.answersType" placeholder="选择问题类型">
                        <a-select-option :value="item.value" v-for="(item,index) in answersType" :key="index">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="风险级别">
                    <a-input v-model="form.dangerLevel" type="number" />
                </a-form-item>
                <!-- <a-form-item label="问题选项">
                    <a-input v-model="form.optionList" />
                </a-form-item> -->
                <a-form-item label="适用组织">
                    <a-select v-model="form.orgIds" placeholder="选择组织" mode="multiple">
                        <a-select-option :value="item.orgId" v-for="(item,index) in orgList" :key="index">
                            {{item.orgName}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="问题状态">
                    <a-select v-model="form.questionStatus" placeholder="选择状态">
                        <a-select-option :value="item.value" v-for="(item,index) in statusList" :key="index">
                            {{item.name}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="问题描述">
                    <a-input v-model="form.questionTitle" />
                </a-form-item>
                <a-form-item label="问题类型">
                    <a-input v-model="form.questionType" />
                </a-form-item>
                <a-form-item label="选项列表">
                    <a-space direction="vertical" style="width: 100%;">
                        <a-input v-model="item.title" placeholder="选项" v-for="(item,index) in form.optionQOList"
                            :key="index">
                            <a-popconfirm slot="addonAfter" title="你确定要删除该选项吗?" ok-text="删除" cancel-text="取消"
                                @confirm="deleteOption(index)">
                                <a-icon type="close" />
                            </a-popconfirm>
                        </a-input>
                    </a-space>
                    <a-button type="primary" @click="addOption">
                        添加选项
                    </a-button>
                    <span style="font-size: 0;">{{show10}}</span>
                </a-form-item>


            </a-form>
        </a-modal>
    </div>
</template>
<script>
    import { message } from 'ant-design-vue';
    import { postQuestionAdd, postQuestionUpdate } from "@/services"

    export default {
        props: {
            // 状态
            statusList: {
                default: () => { },
                type: Array,
            },
            // 问题类型
            answersType: {
                default: () => { },
                type: Array,
            },
            // 组织列表
            orgList: {
                default: () => { },
                type: Array,
            },
        },
        data() {
            return {
                // 是否显示弹框
                show: false,
                // 表单
                form: {
                    answersType: '',
                    dangerLevel: '',
                    operator: '',
                    optionQOList: [
                        // {id:'',title:''}
                    ],
                    orgIds: [],
                    questionStatus: '',
                    questionTitle: '',
                    questionType: '',
                    id: '',
                },
                show10: false
            }
        },
        methods: {
            /**
             * 删除选项
             */
            deleteOption(index) {
                this.form.optionQOList.splice(index, 1)
                this.show10 = !this.show10
            },
            /**
             * 添加选项
             */
            addOption() {
                this.form.optionQOList.push({ id: '', title: '' })
                this.show10 = !this.show10
            },
            /**
             * 打开弹框
             */
            open(data) {
                this.show = true // 打开弹框
                this.form = this.$options.data().form // 初始化
                if (data?.id) {
                    this.form = data
                    this.form.optionQOList = data?.questionOptionDTOList ? data?.questionOptionDTOList : []
                    delete this.form.questionOptionDTOList
                    delete this.form.orgNames
                }
            },
            /**
             * 确认提交
             */
            async handleOk() {
                let { form } = this
                console.log(form)
                // 校验
                if (form.dangerLevel === '') {
                    return message.warning('请填写风险等级')
                }
                if (!form.orgIds.length) {
                    return message.warning('请选择组织')
                }
                if (form.questionStatus === '') {
                    return message.warning('请选择状态')
                }
                if (form.questionTitle === '') {
                    return message.warning('请填写问题描述')
                }
                if (form.questionType === '') {
                    return message.warning('请选择问题类型')
                }
                let formCopy = form
                formCopy.optionQOList = form.optionQOList.map(x => {
                    return x.title
                })
                if (!form.id) {
                    formCopy.optionList = formCopy.optionQOList
                    delete formCopy.optionQOList
                }
                console.log(formCopy)

                if (form.id) {
                    let res = await postQuestionUpdate(formCopy)
                    if (res.code == 0) {
                        message.success('修改成功')
                    } else {
                        return message.warning(res.msg)
                    }
                } else {
                    let res = await postQuestionAdd(formCopy)
                    if (res.code == 0) {
                        message.success('添加成功')
                    } else {
                        return message.warning(res.msg)
                    }
                }
                this.show = false
                this.$emit('ok', 1);
            }
        },
    }
</script>